<template>
  <view class="contain">
    <!-- :style="backgroundImage: url(`${state.baseimgurl}/zhibg.png`)" -->
    <!-- paylist&&paylist.length>0 -->
    <view
    
    v-if=" paylist&&paylist.length>0"
      class="linebox"
      v-for="item in paylist"
      :style="{
        backgroundImage: `url(${state.baseimgurl}/${
          item.payType == 3 ? 'yinbg' : 'zhibg'
        }.png)`,
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
      }"
    >
      <view class="flexSpaceBetween">
        <view class="flexCenter">
            <image
            class="baopay"
            :src="`${state.baseimgurl}/yinicon.png`"
          ></image>
  
          <view>xx银行储蓄卡</view>
        </view>
        <view @tap="handjieopen(item.id)">解绑</view>
      </view>
      <view class="valuetext"><view>9527</view></view>
      <view class="valuetype">{{ item.payType == 3?'储蓄卡':'支付宝'}}</view>
    </view>
    <view v-else class="empbox">
      <view>
        <image
        class="emptyimg"
        :src="`${state.baseimgurl}/emptyimg.png`"
      ></image>
      </view>

    <view class="tipemty">您还没有添加收款账户</view>
    </view>
    <jiepopup ref="popupRef"></jiepopup>
        <!-- 吸底工具栏 -->
        <view
        class="toolbar-height"
        :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
      ></view>
      <view
        class="toolbar"
        :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
      >
        <view class="button-grounp">
          <view @tap="addpay" class="button payment-button"> 添加银行卡/账户 </view>
        </view>
      </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, inject, reactive } from "vue";
import jiepopup from "@/components/jiepopup";
const baseimgurl = inject("$baseimgurl");
import { onShow } from "@dcloudio/uni-app";
import { memberPayAccountList } from "@/utils/api";
const popupRef = ref(null);

onShow(async () => {
  const data = await memberPayAccountList();

  console.log(8888,data.data)
  paylist.value=data.data
  // paylist.value=[{
  //   payType:3,
  //   id:4
  // }]
});
const handjieopen = (id) => {
  console.log(44444,id)

    popupRef.value.jieopen(id);
};
const state = reactive({
  baseimgurl: baseimgurl,
  popupRef:null
});

const paylist = ref([]);
const addpay=()=>{
  uni.navigateTo({
    url: "/pages/me/payselectList",
  });
}
</script>
<style lang="scss" scoped>
.contain {
  padding: 14rpx 30rpx;
}
.linebox {
  padding: 34rpx 22rpx;
  min-height: 245rpx;
  font-size: 25rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 36rpx;
  margin-bottom: 10rpx;
}
.valuetext {
  margin-top: 36rpx;
}
.baopay {
  width: 60rpx;
  height: 60rpx;
  margin-right: 24rpx;
}
.valuetype{
    margin-top: 14rpx;
}
.emptyimg{
  width: 236rpx;
  height: 217rpx;
}
.tipemty{
  margin-top: 53rpx;
}
.empbox{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 80vh;
}
</style>
